<template>
  <div>
    <div>
      <van-nav-bar title="影院" ref="navbar" @click-left="handleCity" @click-right="handleSearch">
        <template #left>
          {{ cityName }}
          <van-icon name="arrow-down" size="10" color="#191a1b"/>
        </template>
        <template #right>
          <van-icon name="search" size="22" color="#191a1b"/>
        </template>
      </van-nav-bar>
    </div>

<!--  todo-> 优化：与影院搜索布局相同，后期可封装成组件  -->
    <div class="box" :style="{height:height}">
      <ul>
        <li v-for="item in cinemaList" :key="item.cinemaId">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="address">{{ item.address }}</div>
          </div>
          <div class="right">
            <div>￥<span>{{ (item.lowPrice / 100).toFixed(1) }}</span>起</div>
            <div class="distance">{{ (item.Distance * 500).toFixed(2) }}km</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// import http from '@/util/http';
import BetterScroll from 'better-scroll';   // 平滑滚动引入
import {mapState,mapActions,mapMutations} from 'vuex';

export default {
  data() {
    return {
      // cinemaList: [],
      height: '0px'
    }
  },
  computed:{
    // 简写
    ...mapState(['cinemaList','cityName','cityId'])     // ==> $store.state.cinemaList
  },
  methods: {
    // 简写 mapActions,mapMutations 的方法都放在此处
    ...mapMutations(['clearCinemaData']),
    ...mapActions(['getCinemaData']),

    handleCity() {
      // console.log("跳转到城市")
      this.$router.push('/city')

      // 清空影院数据
      this.clearCinemaData()
    },
    handleSearch(){
      // console.log("跳转影院搜索")
      this.$router.push('/cinemas/search')
    }
  },
  created() {
    // http.httpForCinema(this.$store.state.cityId).then(res => {
    //   // console.log(res.data.data.cinemas)
    //   this.cinemaList = res.data.data.cinemas

    // dispatch：分发
    // stare里面有cinema数据就不需要发起请求
    if(this.cinemaList.length === 0){
      this.getCinemaData(this.cityId).then(()=>{
        this.$nextTick(() => {   // Dom上树成功后的回调
          // console.log(document.getElementsByTagName('li'))
          new BetterScroll('.box', {
            scrollbar: {
              fade: true  //滚动就会出现滚动条
            }
          })
        })
      })
    }

    this.$nextTick(() => {   // Dom上树成功后的回调
      // console.log(document.getElementsByTagName('li'))
      new BetterScroll('.box', {
        scrollbar: {
          fade: true  //滚动就会出现滚动条
        }
      })
    })
    // })
  },
  mounted() {
    // console.log(this.$refs.navbar.$el.offsetHeight)
    // 计算动态高度
    this.height = document.documentElement.clientHeight -
      this.$refs.navbar.$el.offsetHeight -
      50 + 'px'
      // document.querySelector('footer').offsetHeight + 'px'
    // console.log(this.height)
  }
}
</script>
<style lang="scss" scoped>
.van-icon-arrow-down {
  display: inline-block;
  font-size: 8px;
  -webkit-transform: scale(0.75); /*针对Chrome 设置字体缩小比例*/
  -o-transform: scale(1); /*针对能识别-webkit的opera browser设置*/
}

li {
  height: 45px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  position: relative;


  .left {
    width: 2.12rem;
    padding-right: 15px;

    .name {
      font-weight: 15px;
      color: #191a1b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .address {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .right {
    font-size: 12px;
    color: #ff5f16;

    span {
      font-size: 15px;
    }

    .distance {
      color: #797d82;
      margin-top: 5px;
    }
  }
}

li:before {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  border-top: 1px solid #ececec;
}

.box {
  //height: 6.17rem;
  overflow: hidden;
  background-color: #fff;
  position: relative; /* 为滚动条加定位 */
}
</style>
